<template>
	<view class="reputation-row flex-a" @click.stop="handleReputationClick">
		<view
			:style="{
				background: `url(${imgBaseUrl}koubei-rank-icon.png) no-repeat center center`,
				backgroundSize: 'cover',
				width: '76rpx',
				height: '36rpx',
				zIndex: 2,
			}"
		></view>
		<view class="reputation-content flex-a">
			<view class="reputation-text text-ellipsis ml-10">{{ hot_list_name }}第{{ hot_list_ranking }}名</view>
			<image :src="imgBaseUrl + 'rank-icon-right.png'" class="icon-16 ml-4"></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { pageToRankScenic } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")
const props = defineProps({
	hot_list_id: {
		type: String,
		default: "",
	},
	hot_list_name: {
		type: String,
		default: "",
	},
	hot_list_ranking: {
		type: Number,
		default: 0,
	},
})
const handleReputationClick = () => {
	const { hot_list_id } = props
	if (+hot_list_id > 0) {
		pageToRankScenic(hot_list_id)
	}
}
</script>

<style scoped lang="scss">
.reputation-row {
	position: relative;
	.reputation-content {
		background-color: #feebdd;
		border-radius: 8rpx;
		margin-left: -8rpx;
		padding-left: 8rpx;
		padding-right: 12rpx;
		max-width: 340rpx;
	}
	.reputation-text {
		color: $brown-7c;
		line-height: 36rpx;
	}
}
</style>
